

<template>
    <div style="width:1000px;margin:0 auto;">


        <!--查询条件-->
        <div style="text-align:left;">
            <el-row :gutter="20" style="margin-top:15px;">
                <el-col :span="3">分类</el-col>
                <el-col :span="21">
                    <el-tag type="success" @click="eventCategorySearch(-1)">全部</el-tag>
                    <el-tag type="info" @click="eventCategorySearch(item.id)" v-for="(item, index) in categoryData" :key="index">{{ item.name }}</el-tag>

                </el-col>
            </el-row>


            <el-row :gutter="20" style="margin-top:15px;">
                <el-col :span="3">品牌</el-col>
                <el-col :span="21">
                    <span class="c-box"  @click="eventBrandSeaarch(-1)">全部</span>
                    <span class="c-box" @click="eventBrandSeaarch(item.id)" v-for="(item, index) in brandData" :key="index">{{ item.name }}</span>
                </el-col>
            </el-row>


            <el-row :gutter="20" style="margin-top:15px;">
                <el-col :span="3">价格</el-col>
                <el-col :span="21">
                    <span class="c-box" @click="eventPrice(0,500)">0-500</span>
                    <span class="c-box" @click="eventPrice(500,1000)">500-1000</span>
                    <span class="c-box" @click="eventPrice(1000,5000)">1000-5000</span>
                    <el-input size="mini" style="width:100px;"></el-input> -
                    <el-input size="mini" style="width:100px;"></el-input>
                    <el-button size="mini" type="success">查询</el-button>
                    <el-button type="success">查询2</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top:15px;">
                <el-col :span="24">
                    <el-button size="mini" @click="eventSort('sale')">销量</el-button>
                    <el-button size="mini" @click="eventSort('price')">价格</el-button>
                </el-col>
            </el-row>
        </div>

        <!--商品列表-->
        <div>
            <el-row :gutter="15">
                <el-col style="margin-top:15px;" :span="6" v-for="(o, index) in productData" :key="index">
                    <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            class="image">
                        <div style="padding: 14px;">
                            <span>
                                <router-link :to="'/product/detail?id='+o.id"> {{ o.name }} </router-link>
                            </span>
                            <div class="bottom clearfix">
                                <time class="time" style="color:red;font-weight:600;font-size:18px">
                                    ￥{{ o.salePrice.toFixed(2) }}</time>
                                <el-button type="danger" size="medium">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            categoryData: [],//分类数据
            brandData: [],//品牌数据
            productData: [],//产品列表
            search:{
                categorId:-1,
                brandId:-1,
                price1:-1,
                price2:-2,
                sortField:'id',
                isAsc:true,
            }
        };
    },
    mounted() {
        this.onloadAllData()
    },
    methods: {
        //加载列表数据 -- get 请求模板
        // onloadData(){
        //     let url=''
        //     this.$http.get(url).then(res=>{
        //         console.log(res);
        //     })
        // }

        //价格区间
        eventPrice(p1,p2){
            this.search.price1=p1
            this.search.price2 = p2
            this.onloadProductData()
        },
        //排序事件
        eventSort(val){
            this.search.sortField = val
            this.search.isAsc = !this.search.isAsc
            this.onloadProductData()
        },
        //单击品牌查询
        eventBrandSeaarch(id){
            this.search.brandId = id
            this.onloadProductData()
        },
        //单击分类查询
        eventCategorySearch(id){
            this.search.categorId = id
            this.onloadProductData()
        },
        //加载产品数据
        onloadProductData() {
            let url = this.$baseUrl + '/product'
            this.$http.get(url,{
                params:{
                    title:'',
                    pageIndex:1,
                    pageSize:10,
                    categorId:this.search.categorId,
                    brandId:this.search.brandId,
                    sortField:this.search.sortField,
                    isAsc:this.search.isAsc,
                    price1:this.search.price1,
                    price2:this.search.price2
                }
            }).then(res => {
                //console.log(res);
                this.productData = res.data.data.items
            })
        },
        //加载分类、品牌、产品数据
        onloadAllData() {
            let url = this.$baseUrl + '/product/all'
            this.$http.get(url).then(res => {
                //console.log(res);
                this.brandData = res.data.data.brands
                this.categoryData = res.data.data.categories
                this.productData = res.data.data.skus
            })
                .catch(err => {
                    if (err.code == "ERR_NETWORK") {
                        this.$message.error('网络错误！！！')
                    }
                })
        }
    }
}
</script>


<style>
.c-box {
    border: 1px solid #dcdcdc;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 30px;
    cursor: pointer;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
  